import React, { Component } from 'react'
import { StatusBar, RefreshControl, BackHandler, TouchableOpacity, ScrollView, View, Text } from 'react-native'
import Button from '../Components/Button'
import { connect } from 'react-redux'

import { Loading, Empty } from '../Components'
import WalletActions from '../Redux/WalletRedux'

import AppConfig from '../Config/AppConfig'
const domain = AppConfig.domain

// Styles
import styles from './Styles/WalletScreenStyle'

class WalletScreen extends Component {
  static navigationOptions = ({navigation}) => ({
    title: '我的钱包',
    headerRight: (
      <TouchableOpacity
        onPress={()=>navigation.navigate('WebScreen', {
          title:'明细',
          link:domain+'/api/member/account?token='+navigation.state.params.token})}>
        <Text style={{padding:10}}>明细</Text>
      </TouchableOpacity>
    )
  })
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      loading: true,
      error: false,
    }
  }
  componentDidMount() {
    this.props.getWallet(this.props.token)
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevState.refreshing 
      && prevProps.wallet.fetching 
      && !this.props.wallet.fetching) {
      this.setState({refreshing:false})
    }
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  onRefresh() {
    this.setState({refreshing:true})
    this.props.getWallet(this.props.token)
  }
  render () {
    let mainView = null
    const { navigate, goBack } = this.props.navigation
    if(this.props.wallet.fetching || this.state.refreshing) {
      mainView = <Loading />
    } else if(!this.props.wallet.payload || this.props.wallet.error===true) {
      mainView = <Empty title='出错了' />
    } else {
    mainView = (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh.bind(this)}
          />
        }>
        <View style={styles.section}>
          <Text style={styles.small}>余额</Text>
          <Text style={styles.money}>{this.props.wallet.payload.amount}</Text>
        </View>
        <View style={{padding:20}}>
          <Button margin title='充值'
            onPress={()=>navigate('RechargeScreen')} />
          <Button default title='提现'
            onPress={()=>navigate('WebScreen',{title:'提现',link:domain+'/api/member/withdrawals?token='+this.props.token})} />
        </View>
      </ScrollView>
    )
    }
    return (
      <View style={{flex:1}}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        {mainView}
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.user.payload.token,
    wallet: state.wallet
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getWallet: (token)=>dispatch(WalletActions.walletRequest(token))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(WalletScreen)
